<template>
    <div class="page">
        <button class="btn btn-success" @click="pre(), qingQiu(currentPage)">上一页</button>
        <button :class="{ color: v == currentPage }" v-for="(v, index) in 10" :key="index" @click="btn(v), qingQiu(currentPage)">  {{ v }}</button>
        <button class="btn btn-success" @click="next(), qingQiu(currentPage)">下一页</button>
    </div>
</template>
<script>
export default {
    name:"Page",
    data() {
        return {
            currentPage:1,
        }
    },
    methods: {
        pre() {
            this.currentPage--;
            if (this.currentPage <= 1) {
                this.currentPage = 1;
            }
            sessionStorage.setItem("currentPage",this.currentPage);
        },
        next() {
            this.currentPage++;
            if (this.currentPage >= 10) {
                this.currentPage = 10;
                }
            sessionStorage.setItem("currentPage",this.currentPage);
        },
        btn(v) {
            this.currentPage = v;
            // console.log(a);
            sessionStorage.setItem("currentPage",this.currentPage);
        },
        qingQiu(currentPage){
            this.$emit("msg",currentPage)
        }
    },
    mounted() {
        if (sessionStorage.getItem("currentPage")) {
            this.currentPage = sessionStorage.getItem("currentPage");
        }
    },
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}
.color {
  background-color: rgb(11, 216, 243);
  color: white;
}

</style>